<template>
  <div>
    <div>
    <el-col :span="4" v-for="item in items" :key="item.index">
      <div class="grid-content bg-purple">
        <div>
          <div><a href="javascript:void(0)"><el-image
            @click="findArticleById(item.id)"
            style="width: 200px; height: 200px"
            :src="item.pic"
            fit="fit"></el-image></a></div>
          <div>
            <el-link type="success" @click="findArticleById(item.id)" style="font-size: 20px;">{{item.articleName}}</el-link>
          </div>
        </div>
      </div>
    </el-col>
  </div>
    <div class="block">
      <el-col :span="24" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="3"
          layout="prev, pager, next, jumper"
          :total="count">
        </el-pagination>
      </el-col>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
    export default {
        name: "video1",
      data(){
        return{
          items:[],
          currentPage:1,
          count:null,

        }
      },
      methods:{
        findAll(){
          axios.post("http://localhost:8088/video/findall?page="+this.currentPage+"&size=3").then(res=>{
            if(res.data.code==0){
              this.items=res.data.data;
              this.count=res.data.total;
            }
          })
        },
        findArticleById(id){
          this.$router.push({name:"videoinfo",params:{id:id}});
        },
        handleCurrentChange(val) {
          this.currentPage=val;
          this.findAll();
          console.log(`当前页: ${val}`);
        }
      },
      mounted() {
        this.findAll();
      }
    }

</script>

